<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style>
			.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before {
				color: #FFD161;
			}
			.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']{
				top: -6px;
			}
			.mui-segmented-control .mui-control-item.mui-active {
				color: #EC971F;
				background-color: rgba(255,209,97,0.5);
				
			}
			.mui-segmented-control .mui-control-item{
				border-color: #EC971F;
				color: #333;
			}
			.mui-segmented-control{
				border: 1px solid #EC971F;
			}
			input, textarea, select {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				font-size: 16px;
				color: #8f8f94;
			}
		</style>
	</head>

	<body>
		<script src="../js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav" style="background-color: #EC971F;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title" style="color: white; text-align: left;">新增收货地址</h1>
		</header>
		
		<div class="mui-content">
			<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>联系人：</label>
							<input type="text" placeholder="请填写收货人的姓名">
						</div>
					</li>
					<li class="mui-table-view-cell">
						<form style="display: block;padding: 10px 70px;">
							<div class="mui-radio mui-left" style="float: left;">
								<label>先生</label>
								<input name="gender" type="radio">
								
							</div>
							<div class="mui-radio mui-left" style="float: right;">
								<label >女士</label>
								<input name="gender" type="radio" checked>
							</div>
						</form>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>手机号：</label>
							<input type="text" placeholder="请填写收货人的手机号">
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>收货地址：</label>
							<p style="font-size: 16px; line-height: 40px;">
								<span class="mui-icon mui-icon-location" style="font-size: 20px;"></span>
								请输入
								<span class="mui-icon mui-icon-forward" style="float: right;line-height: 40px;"></span>
							</p>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label>门牌号：</label>
							<input type="text" placeholder="例:7号楼333室">
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
							<label style="width: 160px;">设为常用地址：</label>
							<div class="mui-segmented-control" style="width: 50%;">
								<a class="mui-control-item mui-active" href="#item1">家</a>
								<a class="mui-control-item" href="#item2">公司</a>
								<a class="mui-control-item" href="#item3">学校</a>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<button style="position: relative;margin: 0 15px; width: 100%; top: 26px;" type="button" class="mui-btn mui-btn-yellow mui-btn-block">保存地址</button>
					</li>
				</ul>
		</div>
	</body>

</html>
